<template>
  <div>
    <Table
      ref="table"
      row-key="id"
      :columns="columns"
      :loading="loading"
      :data="data"
      :highlight-row="highlightRow"
      @on-sort-change="sortchange"
      @on-current-change="currentchange"
      @on-row-click="rowclick"
      @on-cell-click="cheageRow"
      @on-selection-change="selectChange"
      :min-height="300"
      :max-height="maxHeight"
      :disabled-hover="disabledhover"
    >
      <!-- 站点管理：域名、操作 -->
      <template slot="realmName" slot-scope="{ row }">
        <template v-if="row.other_domain.length > 0">
          <Tooltip :max-width="500" placement="right">
            <Icon v-if="row.site_type == 1" :size="22" type="md-desktop" />
            <Icon v-else :size="26" type="ios-phone-portrait" />
            <span class="ivu-ml-8 ivu-mr-8"
              ><a
                :href="`${row.bind_ssl == 1 ? 'https://' : 'http://'}${
                  row.domain
                }`"
                target="_blank"
                >{{ row.domain }}</a
              ></span
            >
            <Icon type="ios-paper" />
            <div slot="content" v-if="row.other_domain.length > 0">
              <p>{{ row.other_domain.join(",") }}</p>
            </div>
          </Tooltip>
        </template>
        <template v-else>
          <Icon v-if="row.site_type == 1" :size="22" type="md-desktop" />
          <Icon v-else :size="26" type="ios-phone-portrait" />
          <span class="ivu-ml-8"
            ><a
              :href="`${row.bind_ssl == 1 ? 'https://' : 'http://'}${
                row.domain
              }`"
              target="_blank"
              >{{ row.domain }}</a
            ></span
          >
        </template>
      </template>
      <template slot="remark" slot-scope="{ row }">
        <input
          v-model="row.remark"
          @blur="getremark(row)"
          style="width: 100px"
        />
      </template>
      <template slot="httpSettingAction" slot-scope="{ row }">
        <a
          :href="row.local_backend_url"
          v-if="row.db_type != 4"
          target="_blank"
          :disabled="!row.local_backend_url"
          v-hasC="butshow.Backstage"
          >后台</a
        >
        <Divider
          type="vertical"
          :disabled="!row.local_backend_url"
          v-hasC="butshow.Backstage"
          v-if="row.db_type != 4"
        />
        <a
          :href="row.local_url"
          target="_blank"
          :disabled="!row.local_url"
          v-hasC="butshow.Preview"
          >预览</a
        >
        <!-- <Divider type="vertical" v-hasC="butshow.Preview"/>
                <a :href="row.online_ftp_url" target="_blank" :disabled="!row.online_ftp_url" v-hasC="butshow.Online">线上FTP</a>
                <Divider type="vertical" v-hasC="butshow.Online"/>
                <a :href="row.local_ftp_url" target="_blank" :disabled="!row.local_ftp_url" v-hasC="butshow.OfflineFTP">本地FTP</a> -->
        <!-- <a @click="$emit('handleBackstage', row)" target="_blank" :disabled="!row.local_backend_url" v-hasC="butshow.Backstage">后台</a>
                <Divider type="vertical" :disabled="!row.local_backend_url" v-hasC="butshow.Backstage"/>
                <a @click="$emit('handlePreview', row)" target="_blank" :disabled="!row.local_url" v-hasC="butshow.Preview">预览</a>
                <Divider type="vertical" v-hasC="butshow.Preview"/>
                <a @click="$emit('handleOnline', row)" target="_blank" :disabled="!row.online_ftp_url" v-hasC="butshow.Online">线上FTP</a>
                <Divider type="vertical" v-hasC="butshow.Online"/>
                <a @click="$emit('handleOfflineFTP', row)" target="_blank" :disabled="!row.local_ftp_url" v-hasC="butshow.OfflineFTP">本地FTP</a> -->
      </template>
      <!-- 特别关注 -->
      <template slot="isfocus" slot-scope="{ row }">
        <Switch
          v-model="row.is_focus"
          @on-change="$emit('changeisfocus', row)"
        />
      </template>
      <!-- 站点管理：域名、操作 -->

      <!-- 操作：一键复制文章、VPS管理、内置角色管理 -->
      <template slot="action" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">编辑</a>
        <Divider type="vertical" v-hasC="butshow.Delete" />
        <a @click="$emit('handleDelete', row)" v-hasC="butshow.Delete">删除</a>
      </template>
      <!-- 操作：一键复制文章、VPS管理、内置角色管理 -->

      <!-- 日工作量统计：文章标题 -->
      <template slot="daycountTitle" slot-scope="{ row }">
        <p
          style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
          :title="row.title"
        >
          <a
            :href="`${row.scheme}${row.web_host}${row.local_domain}/${row.page_url}`"
            target="_blank"
            >{{ row.title }}</a
          >
          <Icon
            style="padding-left: 10px"
            type="ios-paper-outline"
            @click="handleCopy(row)"
          />
        </p>
      </template>
      <!-- 日工作量统计：文章标题 1-->

      <!-- 一键复制文章>查看日志：操作 -->
      <template slot="copytextTitle" slot-scope="{ row }">
        <a
          :href="`${row.scheme}${row.target_url}${row.local_domain}/${row.page_url}`"
          target="_blank"
          >查看目标新文章</a
        >
      </template>
      <!-- 一键复制文章>查看日志：操作 -->

      <!-- 服务器状态：VPS管理、项目管理 -->
      <template slot="status" slot-scope="{ row }">
        <font v-if="row.status == 1">启用</font>
        <font v-else-if="row.status == 0" class="red">禁用</font>
      </template>
      <!-- 服务器状态：VPS管理、项目管理 -->

      <!-- 自动上传：操作 -->
      <template slot="robotuploAdaction" slot-scope="{ row }">
        <a
          @click="$emit('handleDelete', row)"
          v-if="row.exec_status == 1"
          v-hasC="butshow.Delete"
          >删除</a
        >
      </template>
      <!-- 自动上传：操作 -->

      <!-- 人员管理：已属项目 -->
      <template slot="project_name_arr" slot-scope="{ row }">
        <template v-for="(item, index) in row.project_name_arr">
          <Tag color="blue" :key="index">{{ item }}</Tag>
        </template>
        <!-- <Tooltip :max-width="500" placement="right">
                    <template v-for="(item,index) in row.project_name_arr">
                        <Tag color="blue" :key="index" v-if="index<=2">{{item}}</Tag>
                    </template>
                    <Tag color="blue" v-if="row.project_name_arr.length - 3>0">+{{row.project_name_arr.length - 3}}</Tag>
                    <div slot="content">
                        <Tag color="blue" v-for="(item,index) in row.project_name_arr" :key="index">{{item}}</Tag>
                    </div>
                </Tooltip> -->
      </template>
      <!-- 人员管理：已属项目 -->

      <!-- 角色: 人员管理、员工管理、操作日志 -->
      <template slot="role_name_arr" slot-scope="{ row }">
        <template v-for="(item, index) in row.role_name_arr">
          <Tag color="blue" :key="index">{{ item }}</Tag>
        </template>
        <!-- <Tooltip :max-width="500" placement="right">
                    <template v-for="(item,index) in row.role_name_arr">
                        <Tag color="blue" :key="index" v-if="index<=2">{{item}}</Tag>
                    </template>
                    <Tag color="blue" v-if="row.role_name_arr.length - 3>0">+{{row.role_name_arr.length - 3}}</Tag>
                    <div slot="content">
                        <Tag color="blue" v-for="(item,index) in row.role_name_arr" :key="index">{{item}}</Tag>
                    </div>
                </Tooltip> -->
      </template>
      <!-- 角色: 人员管理、员工管理、操作日志 -->

      <!-- 站长之家推送记录：操作 -->
      <template slot="kingpushAction" slot-scope="{ row }">
        <a @click="$emit('handleDetails', row)">详情</a>
      </template>
      <!-- 站长之家推送记录：操作 -->

      <!-- 权限管理：操作、备注 -->
      <template slot="powersettingAction" slot-scope="{ row }">
        <a
          @click="$emit('handleEdit', row)"
          v-if="row.type == 1"
          v-hasC="butshow.Edit"
          >编辑</a
        >
        <Divider type="vertical" v-if="row.type == 1" v-hasC="butshow.Edit" />
        <a
          @click="$emit('handleDelete', row)"
          v-if="row.type == 1"
          v-hasC="butshow.Delete"
          >删除</a
        >
        <Divider type="vertical" v-if="row.type == 1" v-hasC="butshow.Delete" />
        <a @click="$emit('handleEmpower', row)" v-hasC="butshow.Empower"
          >授权</a
        >
      </template>
      <!-- 权限管理：操作、备注 -->

      <!-- 备注：权限管理、内置角色管理 -->
      <template slot="type" slot-scope="{ row }">
        <p v-if="row.type == 1">角色</p>
        <p v-else>内置角色</p>
      </template>
      <!-- 备注：权限管理、内置角色管理 -->

      <!-- 操作：系统管理>动作管理 -->
      <template slot="projectsettingActions" slot-scope="{ row }">
        <a
          v-if="row.menu_id"
          @click="$emit('handleEdit', row)"
          v-hasC="butshow.Edit"
          >编辑</a
        >
      </template>
      <!-- 操作：系统管理>动作管理 -->

      <!-- 操作：项目管理，系统管理>菜单管理 -->
      <template slot="projectsettingAction" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">编辑</a>
      </template>
      <!-- 操作：项目管理，系统管理>菜单管理 -->

      <!-- 操作：人员管理 -->
      <template slot="peoplesettingAction" slot-scope="{ row }">
        <a
          @click="$emit('handleUnbound', { ...row, type: false })"
          v-hasC="butshow.Unbound"
          v-if="row.is_bind"
          >编辑</a
        >
        <a
          @click="$emit('handleUnbound', { ...row, type: true })"
          v-hasC="butshow.Bind"
          v-else
          >绑定</a
        >
        <Divider type="vertical" v-hasC="butshow.Unbound" v-if="row.is_bind" />
        <a
          @click="$emit('handleActionLog', row)"
          v-hasC="butshow.ActionLog"
          v-if="row.is_bind"
          >操作日志</a
        >
        <Divider
          type="vertical"
          v-hasC="butshow.ActionLog"
          v-if="row.is_bind"
        />
        <a
          @click="$emit('handleReset', row)"
          v-hasC="butshow.Reset"
          v-if="row.is_bind"
          >重置密码</a
        >
        <Divider type="vertical" v-hasC="butshow.Reset" v-if="row.is_bind" />
        <a
          @click="$emit('handleUnbind', row)"
          v-hasC="butshow.Unbind"
          v-if="row.is_bind"
          >解绑项目</a
        >
        <Divider
          type="vertical"
          v-hasC="butshow.Unbind"
          v-if="row.status_str == '启用'"
        />
        <a
          @click="$emit('handleDepart', row)"
          v-hasC="butshow.Depart"
          v-if="row.status_str == '启用'"
          >离职</a
        >
      </template>
      <!-- 操作：人员管理 -->

      <!-- 操作：员工管理 -->
      <template slot="staffsettingAction" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">编辑</a>
        <Divider type="vertical" v-hasC="butshow.Edit" />
        <a @click="$emit('handleUnbind', row)" v-hasC="butshow.Unbind">解绑</a>
        <!-- <Divider type="vertical" v-hasC="butshow.Unbind"/>
                <a @click="$emit('handleActionLog', row)" v-hasC="butshow.ActionLog">操作日志</a> -->
      </template>
      <!-- 操作：员工管理 -->

      <!-- 姓名：人员管理 -->
      <template slot="realname" slot-scope="{ row }">
        <p>
          <span>{{ row.realname }}</span
          ><Icon
            v-if="row.is_manager == 1"
            class="ivu-ml-8"
            color="#19be6b"
            size="16"
            type="ios-body"
            title="项目管理员"
          />
        </p>
      </template>
      <!-- 姓名：人员管理 -->

      <!-- 站点上传日志：状态 -->
      <template slot="exec_status_str" slot-scope="{ row }">
        <p v-if="row.exec_status == 3">{{ row.exec_status_str }}</p>
        <p v-else>
          <span>{{ row.exec_status_str }}</span
          ><a class="ivu-ml-8 red" @click="$emit('handleFail', row)"
            >查看原因</a
          >
        </p>
      </template>
      <!-- 站点上传日志：状态 -->

      <!-- 队列计划：类型 -->
      <template slot="type_str" slot-scope="{ row }">
        <p v-if="row.exec_status == 1">{{ row.exec_status_str }}</p>
        <p v-else class="red">{{ row.exec_status_str }}</p>
      </template>
      <!-- 队列计划：类型 -->

      <!-- 商务通配置：操作 -->
      <template slot="businessAdaction1" slot-scope="{ row }">
        <a @click="$emit('handleDelete', row)" v-hasC="butshow.Delete">删除</a>
      </template>
      <template slot="businessAdaction2" slot-scope="{ row }">
        <a @click="$emit('handleSee', row)" v-hasC="butshow.See">查看</a>
        <Divider type="vertical" v-hasC="butshow.See" />
        <a @click="$emit('handleDelete', row)" v-hasC="butshow.Delete">删除</a>
      </template>
      <template slot="businessAdaction3" slot-scope="{ row }">
        <a
          @click="$emit('handleConfig', row)"
          v-hasC="butshow.config"
          v-if="row.is_config == 1"
          >配置</a
        >
        <Divider
          type="vertical"
          v-hasC="butshow.See"
          v-if="row.is_config == 1"
        />
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">编辑</a>
        <Divider type="vertical" v-hasC="butshow.See" />
        <a @click="$emit('handleDelete', row)" v-hasC="butshow.Delete">删除</a>
      </template>
      <!-- 商务通配置：操作 -->

      <!-- 页面模板控制器：操作 -->
      <template slot="templatecontrolAdaction" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">编辑</a>
      </template>
      <!-- 页面模板控制器：操作 -->

      <template slot="footer" v-if="total >= 0">
        <Page
          show-total
          show-elevator
          show-sizer
          transfer
          :total="total"
          :current.sync="params.page"
          :page-size="params.pageSize"
          :page-size-opts="pageOptss ? pageOptss : pageOpts"
          @on-change="changepage"
          @on-page-size-change="changepageSize"
          style="text-align: center"
        />
      </template>

      <!-- 动作：唯一标识，路由 -->
      <template slot="marking" slot-scope="{ row }">
        <a @click="$Copy({ text: row.marking })">{{ row.marking }}</a>
      </template>
      <template slot="flag" slot-scope="{ row }">
        <a @click="$Copy({ text: row.flag })">{{ row.flag }}</a>
      </template>
      <!-- 动作：唯一标识，路由 -->
      <!-- 违规词列表编辑、删除 -->
      <template slot="option" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">编辑</a>
        <Divider type="vertical" v-hasC="butshow.See" />
        <a @click="$emit('handleDelete', row)" v-hasC="butshow.Delete">删除</a>
      </template>
      <!-- 违规词列表编辑、删除 -->
      <!-- 发布系统文章列表编辑属性、编辑、预览 -->
      <template slot="artaction" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">编辑属性</a>
        <Divider type="vertical" v-hasC="butshow.Detail" />
        <a @click="$emit('handleDetail', row)" v-hasC="butshow.Detail">编辑</a>
        <Divider type="vertical" v-hasC="butshow.Url" />
        <a
          :href="row.article_url"
          target="_blank"
          :disabled="!row.article_url"
          v-hasC="butshow.Url"
          >预览</a
        >
      </template>
      <!-- 发布系统文章列表编辑属性、编辑、预览-->
      <!--  发布系统回收站-->
      <template slot="contentsite" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">还原</a>
        <Divider type="vertical" v-hasC="butshow.See" />
        <a @click="$emit('handleDelete', row)" v-hasC="butshow.Delete">删除</a>
      </template>
      <!-- 发布系统回收站 -->
      <!-- 菜单点击统计 -->
      <template slot="operate" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)">{{ row.click_num }}</a>
      </template>
      <!-- 菜单点击统计 -->
      <!-- 301跳转列表 -->
      <template slot="jumpoption" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">修改</a>
        <Divider type="vertical" v-hasC="butshow.Detail" />
        <a @click="$emit('handleDelete', row)" v-hasC="butshow.Delete">删除</a>
      </template>
      <!-- 301跳转列表 -->
      <!-- 公众号配置 -->
      <template slot="appid" slot-scope="{ row }">
        <span>{{ row.appid }}</span>
        <Icon type="md-copy" @click="$emit('handleCopyid', row)" />
      </template>
      <template slot="appsecret" slot-scope="{ row }">
        <span>{{ row.secret }}</span>
        <Icon type="md-copy" @click="$emit('handleCopysecret', row)" />
      </template>
      <template slot="option" slot-scope="{ row }">
        <a @click="$emit('handleEdit', row)" v-hasC="butshow.Edit">编辑</a>
        <Divider type="vertical" v-hasC="butshow.See" />
        <a @click="$emit('handleDelete', row)" v-hasC="butshow.Delete">删除</a>
      </template>
    </Table>
  </div>
</template>
<script>
import Input from "../search/Input.vue";
import { updateRemark } from "@api/httpsetting";
import Template from "../search/template.vue";
export default {
  components: { Input, Template },
  name: "JG-table",
  props: {
    params: { type: Object },
    data: { type: Array },
    handleLoadData: { type: Function },
    loading: { type: Boolean },
    disabledhover: { type: Boolean },
    columns: { type: Array },
    total: { type: [String, Number] },
    butshow: { type: Object },
    highlightRow: { type: Boolean, default: false },
    maxHeight: { type: [String, Number] },
    pageOptss: { type: Array },
  },
  data() {
    return {
      pageOpts: [10, 20, 50, 100],
      maxHeights: "",
    };
  },
  mounted() {
    this.maxHeights = window.screen.height - 430;
  },
  methods: {
    selectChange(selection) {
      this.$emit("on-select", selection);
    },
    currentchange(currentRow, oldCurrentRow) {
      this.$emit("on-current-change", currentRow);
    },
    rowclick(row, index) {
      this.$emit("on-row-click", { row, index });
    },
    cheageRow(row, index) {
      this.$emit("on-cell-click", { row, index });
    },
    /* @函数功能: 分页 */
    changepage(e) {
      this.$refs.table.clearCurrentRow();
      this.params.page = e;
      this.$emit("askData");
    },
    /* @函数功能: 每页数量 */
    changepageSize(e) {
      this.$refs.table.clearCurrentRow();
      this.params.page = 1;
      this.params.pageSize = e;
      this.$emit("askData");
    },
    /* @函数功能: 列表排序 */
    sortchange(e) {
      let sort = 0;
      if (e.order === "desc") {
        sort = 2;
      } else if (e.order === "asc") {
        sort = 1;
      } else {
        sort = 0;
      }
      this.$emit("sortchange", { sort, key: e.key });
    },
    // 更新备注
    getremark(item) {
      let params = {
        id: item.id,
        remark: item.remark,
      };
      updateRemark(params).then((res) => {
        this.$Message.success("保存成功");
      });
    },
    //日工作统计复制文章链接
    handleCopy(row) {
      this.$Copy({
        text: `${row.scheme}${row.web_host}${row.local_domain}/${row.page_url}`,
      });
    },
  },
};
</script>
